<!--
 * @Description: 房间
 *
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-05-13 10:35:14
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/room/proRoom/index.vue
-->
<template>
  <el-collapse-item title="房间列表" name="0" disabled>
    <template slot="title">
      房间列表
      <el-button
        type="primary"
        plain
        size="mini"
        icon="el-icon-plus"
        class="ml10"
        @click.stop="handleAddRoom()"
      >
        添加
      </el-button>
    </template>
    <el-form ref="form" :model="form" :rules="rules" inline size="mini">
      <el-table :data="form.list">
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="名称" align="center" prop="name">
          <template slot-scope="{ row }">
            <el-form-item prop="name">
              <el-input
                style="width: 100%"
                v-model="row.name"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="宽" align="center" prop="width" width="80">
          <template slot-scope="{ row }">
            <el-form-item prop="width">
              <el-input
                style="width: 100%"
                v-model="row.width"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="高" align="center" prop="height" width="80">
          <template slot-scope="{ row }">
            <el-form-item prop="height">
              <el-input
                style="width: 100%"
                v-model="row.height"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="图" align="center" prop="picture" width="80">
          <template slot-scope="{ row }">
            <el-form-item prop="picture">
              <el-input
                style="width: 100%"
                v-model="row.picture"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark">
          <template slot-scope="{ row }">
            <el-form-item prop="remark">
              <el-input
                style="width: 100%"
                v-model="row.remark"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['md:order:edit']"
              >保存</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleCopy(scope.row)"
              v-hasPermi="['md:order:edit']"
              >复制</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope)"
              v-hasPermi="['md:order:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <copy-view
      v-if="copy.show"
      :show.sync="copy.show"
      v-bind="copy"
      @update="getList"
    ></copy-view>
  </el-collapse-item>
</template>

<script>
import {
  listRoom,
  getRoom,
  addRoom,
  updateRoom,
  delRoom,
} from "@/api/asc/room";
import CopyView from "./copy.vue";
const FORM = {
  name: "",
  width: "",
  height: "",
  picture: "",
  remark: "",
  creRoomNumber: 0,
};
export default {
  components: {
    CopyView,
  },
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50000,
      },
      add: {
        show: false,
        type: "add",
        data: null,
      },
      form: {
        list: [],
      },
      rules: {},
      copy: {
        show: false,
        data: null,
      },
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listRoom({
        ...this.queryParams,
        orderId: this.data.proOrderId,
      }).then(({ rows, total }) => {
        console.log(rows);
        this.form.list = rows;
        // this.total = total;
      });
    },
    handleAddRoom() {
      this.form.list.push({
        ...FORM,
      });
      this.$emit("active", "0");
    },
    handleUpdate(row) {
      const params = {
        ...row,
        orderId: this.data?.proOrderId,
      };
      if (params.proRoomId != null) {
        updateRoom(params).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.getList();
        });
      } else {
        addRoom(params).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete({ row, $index }) {
      if (row?.proRoomId) {
        const proRoomIds = row.proRoomId;
        this.$modal
          .confirm("是否确认删除房间")
          .then(function () {
            return delRoom(proRoomIds);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        this.form.list?.splice($index, 1);
      }
    },
    handleCopy(row) {
      this.copy = {
        show: true,
        data: {
          ...row,
        },
      };
    },
  },
};
</script>
